<!DOCTYPE html>
<html>
<head>
   <title>Canvas Toolkit Demo</title>
   <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
   <script type="text/javascript" src="../canvastoolkit.js"></script>
   <script type="text/javascript">
      function drawShapes() {
         var g = new ctk.Graphics("myCanvas");
         
         // Draw a filled blue rectangle
         g.setColor("#0000ff");
         g.fillRect(10, 10, 40, 20);

         // Draw a unfilled blue rectangle
         g.setStrokeColor("#0000ff");
         g.drawRect(100, 10, 40, 20);
         
         // Draw a static face without translating graphics origin
         drawStaticFace(g);

         // Draw tan face
         drawFace(g, 50, 50, 42, "#ebc79e");
         
         // Draw small green face
         drawFace(g, 50, 150, 22, "#00ff00");
         
         // Draw extremely small red face
         drawFace(g, 150, 190, 10, "red");
      }
      
      function drawStaticFace(g) {
         // Draw filled a black circle (face outline)
         g.setColor("#000000");
         g.fillCircle(128, 98, 42);

         // Draw filled a yellow circle (face)
         g.setColor("yellow");
         g.fillCircle(130, 100, 40);

         // Draw two unfilled a black circles (eyes)
         g.setStrokeColor("#000000");
         g.drawCircle(155, 120, 5);
         g.drawCircle(180, 120, 5);
         
         // Draw a black line (mouth)
         g.setStrokeColor("#000000");
         g.drawLine(150, 155, 190, 155);
      }
      
      function drawFace(graphics, x, y, radius, faceColor) {
         var diameter = radius * 2;
         
         // Create a new graphics context relative to the x/y coordinates
         var g = graphics.create(x, y, diameter, diameter);
         
         // Draw filled a black circle (face outline)
         g.setColor("#000000");
         g.fillCircle(0, 0, radius);

         // Draw filled a circle (face)
         var strokeSize = 2;
         g.setColor(faceColor);
         g.fillCircle(strokeSize, strokeSize, radius - strokeSize);

         // Draw two unfilled a black circles (eyes)
         var eyeRadius = diameter / 15;
         var eyeX1 = radius - eyeRadius * 3;
         var eyeX2 = radius + eyeRadius * 3 - eyeRadius * 2;
         var eyeY = diameter / 3;
         g.setStrokeColor("#000000");
         g.drawCircle(eyeX1, eyeY, eyeRadius);
         g.drawCircle(eyeX2, eyeY, eyeRadius);
         
         // Draw a black line (mouth)
         var mouthWidth = diameter / 2;
         var mouthX = radius - mouthWidth / 2;
         var mouthY = diameter * 2 / 3;
         g.setStrokeColor("#000000");
         g.drawLine(mouthX, mouthY, mouthX + mouthWidth, mouthY);
      }
   </script>
</head>
<body onload="drawShapes();">
   <canvas id="myCanvas" width="240" height="240" style="background-color: #ffffff; border: solid 1px #000000;"></canvas>
</body>
</html>